<template>
  <div class="help-canvas-wrapper">
    <div class="hole" :style="holeStyle">
      <div class="arrow" :style="arrowStyle">
        <i v-if="arrowDirection === 'left'" class="el-icon-arrow-left mr"></i>
        <div class="line"></div>
        <i v-if="arrowDirection === 'right'" class="el-icon-arrow-right ml"></i>
      </div>
    </div>
    <div class="desc-box" :style="getSafeToolTipPosition()">
      <div class="top">
        <i class="el-icon-close close-icon" @click="onClose"></i>
      </div>
      <div class="middle">{{ currentHelpData.elementDesc }}</div>
      <div class="bottom">
        <div class="bottom-left">{{ stepDesc }}</div>
        <div class="bottom-right">
          <span v-if="step > 0" class="pre" @click="addStep(-1)">上一步</span>
          <span v-if="step < totalStep - 1" class="next" @click="addStep(1)"
            >下一步</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelpBoxShadow",
  props: {
    helpData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      step: 0,
      arrowDirection: "right",
    };
  },
  computed: {
    currentHelpData() {
      return this.helpData.elementList[this.step];
    },
    holeStyle() {
      const { width, height, top, left } = this.currentHelpData;
      return { width, height, top, left };
    },
    totalStep() {
      return this.helpData.elementList.length;
    },
    stepDesc() {
      return `${this.step + 1}/${this.totalStep}步`;
    },
    arrowStyle() {
      return this.arrowDirection === "right"
        ? { right: "-2.5vw" }
        : { left: "-2.5vw" };
    },
  },
  methods: {
    onClose() {
      this.$emit("onClose");
    },
    getSafeToolTipPosition() {
      // 获取元素的原始位置
      const originalPosition = this.getToolTipPosition();

      // 获取窗口的宽度和高度
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;

      // 计算元素的实际位置
      const elementLeft =
        (windowWidth * parseFloat(originalPosition.left)) / 100;
      const elementTop =
        (windowHeight * parseFloat(originalPosition.top)) / 100;

      // 元素的宽度和高度
      const elementWidth = 200;
      const elementHeight = 200;

      // 计算元素的右侧和底部边界
      const elementRight = elementLeft + elementWidth;
      const elementBottom = elementTop + elementHeight;

      // 如果元素的右侧超出窗口宽度
      if (elementRight > windowWidth || elementBottom > windowHeight) {
        originalPosition.left = "auto";
        this.arrowDirection = "left";
      } else {
        this.arrowDirection = "right";
        originalPosition.right = "auto";
      }

      // 如果元素的底部超出窗口高度
      if (elementBottom > windowHeight) {
        originalPosition.top = "auto";
      } else {
        originalPosition.bottom = "auto";
      }

      return originalPosition;
    },
    getToolTipPosition() {
      const element = this.currentHelpData;
      console.log("element", element);
      return {
        top: element.top,
        left: parseFloat(element.left) + parseFloat(element.width) + 2.5 + "%",
        right: parseFloat(element.width) + 3 + "%",
        bottom: parseFloat(element.height) + 1 + "%",
      };
    },
    addStep(num) {
      this.step += num;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.help-canvas-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .hole {
    position: absolute;
    border-radius: 4px;
    border: 1px dashed rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 300vh rgba(0, 0, 0, 0.3);

    .arrow {
      position: absolute;
      width: 2.5vw;
      display: flex;
      align-items: center;
      color: #fff;

      .line {
        height: 1px;
        width: 100%;
        background: #fff;
      }

      .ml {
        margin-left: -10px;
      }

      .mr {
        margin-right: -10px;
      }
    }
  }

  .desc-box {
    position: absolute;
    width: 200px;
    padding: 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;

    .top {
      text-align: right;
      .close-icon {
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
      }
    }

    .middle {
      margin: 6px 0 14px;
    }

    .bottom {
      display: flex;
      justify-content: space-between;

      &-right {
        cursor: pointer;

        span + span {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
